// origin-web-common mixins

// DESCRIPTION: Limits text to x number of lines and adds an ellipsis to the
// end of the truncated line in webkit-based browsers
.line-clamp(@lines: 1, @line-height: @line-height-base) {
  display: -webkit-box;
  line-height: @line-height;
  max-height: (1em * @line-height * @lines);
  overflow: hidden;
  padding: 0 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
}

// word-break and word-break-all test cases http://codepen.io/sg00dwin/pen/WwKMmP
//
// DESCRIPTION: Breaks long non-breaking strings within a div or a flexed item that is within a flex container
// EXAMPLE:
// <div style="display:flex">
//   <div style="flex:1" class="word-break">...
// </div>
// An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line.
// (1) https://bugzilla.mozilla.org/show_bug.cgi?id=1136818#c2
// USAGE:
// - DO choose to use over word-break-all if at all possible
.word-break {
     word-wrap: break-word; // firefox, IE
    word-break: break-word; // non-standard for webkit
 overflow-wrap: break-word; // new name as per the CSS3 spec
     min-width: 0;          // firefox (1)
}
// DESCRIPTION: Breaks long non-breaking strings under the following circumstances:
// - if within a table not set to table-layout: fixed (but have a very good reason for doing so!  otherwise, see .table-layout-fixed)
// - fieldset
// - flex container where a flexed child CANNOT use .word-break() and flex: 1 1 0% (note that exact combo is required on the child)
// EXAMPLE:
// <div style="display:flex">
//   <div class="word-break-all">...
// </div>
// INSTEAD OF:
// <div style="display:flex">
//   <div class="word-break" style="flex: 1 1 0%">...
// </div>
// Guarantees the string will wrap. word-break: break-all; is used by firefox and IE to break in the usage cases.
// https://bugzilla.mozilla.org/show_bug.cgi?id=587438, https://bugzilla.mozilla.org/show_bug.cgi?id=1136818
// USAGE:
// This class will break normal words in awkward places.  Therefore:
// - DO use for shas or other long identifiers that are arbitrary
// - DO NOT use in any other case such as paragraph text, descriptions, titles, project names, etc.
//   opt for 'word-break' above
.word-break-all {
    word-break: break-all;  // firefox, IE
    word-break: break-word; // non-standard for webkit
 overflow-wrap: break-word; // new name as per the CSS3 spec
}
